<template>
	<div class='todo-item'>
		<span class="input-wrap">
			<input type="checkbox" :checked="completed" @change="toogleItem(index)" />
		</span>
		<span class="text">{{text}}</span>
		<span class='delete' @click="onDelete(index)">X</span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		props: {
			text: {
				type: String,
				required: true
			},
			completed: {
				type: Boolean,
				required: true	
			},
			index: {
				type: Number,
				required: true	
			},
			toogleItem: {
				type: Function,
				required: true
			},
			onDelete: {
				type: Function,
				required: true
			}
		}
	}
</script>

<style lang="less" scoped>
	.todo-item {
		background: #fff;
		height: 32px;
		line-height: 32px;
		border-left: 5px solid #629A9C;
		box-shadow: 0 1px 2px rgba(0,0,0,0.07);
		margin: 10px 0;
		
		.input-wrap {
			float: left;
			width: 22px;
			height: 22px;
			margin: 5px 10px 0px 10px;
			input {
				width: 100%;
				height: 100%;
			}
		}
		
		span.text {
			display: inline-block;
			height: 100%;
			line-height: 32px;
			font-size: 14px;
		}
		
		span.delete {
			float: right;
			width: 20px;
			height: 20px;
			cursor: pointer;
		}
	}
</style>
